import React, { PureComponent } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT, STATUSBAR_HEIGHT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

export default class HomeHeader extends PureComponent {
  static propTypes = {
    cityName: PropTypes.string,
    cityClick: PropTypes.func,
    searchClick: PropTypes.func
  }

  render () {
    const { cityName, cityClick, searchClick } = this.props
    return (
      <View style={styles.container}>
        <CustomButton style={styles.cityButton} onPress={cityClick}>
          <Text style={styles.cityName}>{cityName}</Text>
          <View style={styles.top}/>
        </CustomButton>
        <CustomButton onPress={searchClick}>
          <CustomImage
            style={styles.search}
            source={require('src/imgC/home/search.png')}
          />
        </CustomButton>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: ScaleS(20),
    marginTop: STATUSBAR_HEIGHT + ScaleS(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  cityButton: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  cityName: {
    height: ScaleS(42),
    lineHeight: ScaleS(42),
    fontSize: ScaleT(20),
    fontWeight: '600',
    color: '#000000'
  },
  top: {
    // marginTop: ScaleS(15),
    width: 0,
    height: 0,
    marginLeft: ScaleS(8),
    borderLeftWidth: ScaleS(4),
    borderLeftColor: 'transparent',
    borderRightWidth: ScaleS(4),
    borderRightColor: 'transparent',
    borderTopWidth: ScaleS(6),
    borderTopColor: '#000000'
  },
  search: {
    width: ScaleS(20),
    height: ScaleS(20)
  }
})
